<template>
    <el-form :model="form" :inline="true" class="demo-form-inline">
        <el-form-item label="姓名">
            <el-input v-model="form.employsName" />
        </el-form-item>
        <el-form-item label="部门">
            <el-select v-model="form.departName">
                <el-option value="全部" label="全部" />
                <!-- 可添加其他部门选项 -->
            </el-select>
        </el-form-item>
        <el-form-item label="职位">
            <el-select v-model="form.positionName">
                <el-option value="全部" label="全部" />
                <!-- 可添加其他职位选项 -->
            </el-select>
        </el-form-item>
        <el-form-item label="到岗日期">
            <el-date-picker v-model="form.onboardingDate" type="date" />
        </el-form-item>
        <el-form-item label="合同签署日期">
            <el-date-picker v-model="form.createTime" type="date" />
        </el-form-item>
        <el-form-item label="审批状态">
            <el-select v-model="form.approvalType" style="width: 100px;">
                <el-option :value="4" label="已拒绝" />
                <el-option :value="3" label="已通过" />
                <el-option :value="2" label="待审批" />
                <el-option :value="1" label="待提交" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getData()">查询</el-button>
            <el-button type="primary" @click="add()">添加</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="employsName" label="员工姓名" />
        <el-table-column prop="departName" label="部门" />
        <el-table-column prop="positionName" label="职位" />
        <el-table-column prop="leaderName" label="上级负责人" />
        <el-table-column prop="onboardingDate" label="入职日期" :formatter="formatDate" />
        <el-table-column prop="approvalType" label="审批类型" :formatter="formatApprovalType" />
        <el-table-column prop="approvalName" label="审批人" />
        <el-table-column prop="createName" label="创建人" />
        <el-table-column prop="createTime" label="创建时间" :formatter="formatDate" />
        <el-table-column label="操作" width="180px">
            <template v-slot="scope">
                <el-button type="success" @click="del(scope.row.onboardTransactId)">删除</el-button>
                <el-button type="primary">查看</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :background="true"
        :page-sizes="[10, 15, 20, 25]" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from '@/api/http'
import { h } from 'vue';
import { ElTag } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus'
import VolBox from "@/components/basic/VolBox.vue";
onMounted(() => {

    getData()
    console.log(form.approvalType)
})
//查询条件
const form = reactive({
    employsName: "",
    departName: "",
    positionName: "",
    onboardingDate: "",
    createTime: "",
    approvalType: "",
    pageIndex: 1,
    pageSize: 30,
})
//分页
const page = reactive({
    total: 0,
    totalPage: 0
})
//显示数据
const tableData = ref([])
const getData = () => {
    axios.post('/personnel-write/api/onboardtransact/GetOnboardtransact', form)

        .then(res => {
            tableData.value = res.data

            page.total = res.total
            page.totalPage = res.totalPage
        })
}
//分页
const handleSizeChange = (val: number) => {
    form.pageSize = val;
    getData()
}
const handleCurrentChange = (val: number) => {
    form.pageIndex = val;
    getData()
}
//日期
const formatDate = (row: any, column: any, cellValue: any, index: any) => {
    if (!cellValue) return '';
    const date = new Date(cellValue);
    return date.toISOString().split('T')[0]; // 只取日期部分
}
//审批类型
const formatApprovalType = (row: any, column: any, cellValue: any, index: any) => {
    const approvalTypeMap = {
        4: { text: '已拒绝', type: 'danger' },
        3: { text: '已通过', type: 'success' },
        2: { text: '待审批', type: 'warning' },
        1: { text: '待提交', type: 'info' },
    };
    const { text, type } = approvalTypeMap[cellValue] || { text: '未知状态', type: 'default' };
    return h(ElTag, { type }, text);
};
//删除
const del = (onboardTransactId: any) => {
    const date = []
    date.push(onboardTransactId)
    ElMessageBox.confirm(
        '确认要删除吗',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.post('/personnel-write/api/onboardtransact/DelOnboardtransact', date)
                .then(res => {
                    if (res > 0) {
                        ElMessage.success('删除成功');
                        getData()
                    }
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}
//添加
import { useRouter } from 'vue-router'

const router = useRouter()
const add = () => {
    router.push({ path: '/onboardtransactAdd' })
}
</script>